<template>
  <div v-if="show" class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane :label="$t('template')">
        <product-template :product-id="productId" />
      </el-tab-pane>
      <el-tab-pane :label="$t('series')">
        <series :product-id="productId" />
      </el-tab-pane>
      <el-tab-pane :label="$t('navigation')">
        <navigation :product-id="productId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Series from './components/Series'
import ProductTemplate from './components/Template'
import Navigation from './components/Navigation'
export default {
  name: 'ProductInfo',
  components: {
    ProductTemplate,
    Series,
    Navigation
  },
  data() {
    return {
      name: null,
      keyName: null,
      productId: null,
      show: false
    }
  },
  mounted() {
    const param = this.$route.query
    if (param.productId) {
      this.productId = parseInt(param.productId)
    }
    this.name = param.name
    this.keyName = param.keyName
    this.show = true
    this.setTagsViewTitle()
  },
  methods: {
    setTagsViewTitle() {
      this.tempRoute = Object.assign({}, this.$route)
      const route = Object.assign({}, this.tempRoute, {
        title: `${this.name}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    }
  }
}
</script>
